<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="white-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
		<form class="form-horizontal m" id="form-userInfo-add">
			<div class="form-group">
				<label class="col-sm-3 control-label ">用户名：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" id="username" name="username"/>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">姓名：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" name="name" id="name">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">密码：</label>
				<div class="col-sm-8">
					<input class="form-control" type="password" name="password" id="password">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">状态：</label>
				<div class="col-sm-8">
					<div class="onoffswitch">
                         <input type="checkbox" th:checked="true" class="onoffswitch-checkbox" id="state" name="state">
                         <label class="onoffswitch-label" for="state">
                             <span class="onoffswitch-inner"></span>
                             <span class="onoffswitch-switch"></span>
                         </label>
                     </div>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">职位：</label>
				<div class="col-sm-8">
					<select name="position" id="position" class="form-control">
					<option value="1">管理员</option>
					<option value="2">理发师</option>
					<option value="3">收银员</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">角色：</label>
				<div class="col-sm-8">
					<label th:each="role:${roles}" class="check-box">
						<input name="role" type="checkbox" th:value="${role.roleId}" th:text="${role.roleName}" th:disabled="${role.status == '1'}">
					</label>
				</div>
			</div>
			
		</form>
	</div>
	<div th:include="include::footer"></div>
	<script type="text/javascript">
		$("#form-userInfo-add").validate({
			rules : {
				username : {
					required : true,
					minlength: 2,
        			maxlength: 20,
        			remote: {
                        url: "/userInfo/checkUserNameUnique",
                        type: "post",
                        dataType: "json",
                        data: {
                        	name : function() {
                                return $("#username").val();
                            }
                        },
                        dataFilter: function(data, type) {
                           
                        	return $.validate.unique(data);
                        }
                    }
				},
				name : {
					required : true,
					
				},
				password:{
        			
        			minlength: 5,
        			maxlength: 20
        		},
			},
			messages: {
                "username": {
                    remote: "用户已经存在"
                },
        		
            }
		
		});

		function submitHandler() {
			if ($.validate.form()) {
				add();
			}
		};
		 function add() {
	        	
	        	var username = $("input[name='username']").val();
	        	var password = $("input[name='password']").val();
	        	var name = $("input[name='name']").val();	
	        	var state = $("input[name='state']").is(':checked') == true ? 1 : 2;
	        	var position = $('#position').val();
	        	var roleIds = $.form.selectCheckeds("role");
	        	$.ajax({
	        		cache : true,
	        		type : "POST",
	        		url :  "/userInfo/add",
	        		data : {

	        			"username": username,
	        			"name" : name,
	        			"password": password,
	        			"state": state,
	        			"roleIds": roleIds,
	        			"position": position,
	                    
	        		},
	        		async : false,
	        		error : function(request) {
	        			$.modal.alertError("系统错误");
	        		},
	        		success : function(data) {
	        			$.operate.successCallback(data);
	        		}
	        	});
	        }
	</script>
</body>
</html>
